<template>
  <div class="box" @click.self="look()" v-if="css">
    <div class="topSearch">
      <h2>&#xe752;搜索</h2>
      <input type="text" class="Search" @input="search()" v-model="txt" />
      <ul>
        <li v-for="i of data">
          <p class="title">{{ i.name }}</p>
          <p class="content">{{ i.articleData }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import getSearch from "netWork/getSearch";
export default {
  name: "TopSearch",
  data() {
    return {
      css: false,
      time: null,
      txt: "",
      data: {},
    };
  },
  mounted() {
    this.$bus.$on("Search", () => {
      this.css = true;
    });
  },
  methods: {
    look() {
      this.css = false;
    },
    search() {
      if (this.time) clearTimeout(this.time);
      this.time = setTimeout(() => {
        if (this.txt != "") {
          getSearch(this.txt).then((res) => {
            this.data = res.data;
          });
        } else {
          this.data = {};
        }
      }, 500);
    },
  },
};
</script>
<style scoped>
.box {
  position: absolute;
  z-index: 101;
  width: 100vw;
  height: 100vh;
}
.topSearch {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  min-width: 980px;
  width: 80%;
  height: 600px;
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 10px;
  overflow: auto;
}
h2 {
  margin: 20px 0;
  color: rgb(54, 54, 54);
  font-size: 28px;
  letter-spacing: 2px;
}
input[type="text"] {
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid rgb(56, 56, 56);
  width: 100%;
  height: 40px;
  padding: 0 20px;
  margin-bottom: 20px;
  outline: none;
  font-size: 20px;
  color: rgb(58, 58, 58);
}
ul li {
  padding: 10px 0;
  border-bottom: 1px rgb(90, 89, 89) dashed;
  margin-bottom: 20px;
}
.title {
  font-size: 27px;
  margin-bottom: 20px;
}
.content {
  height: 55px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>